<template>
  <div>
    <div :id="qrCode" :ref="qrcode" style="padding:5px; display: flex; justify-content: center;"></div> 
    <p class="qrcode_bottom" style="text-align: center">手机扫一扫签名</p>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  props: ['type'],
  data() {
    return {
      qrCode: 'qrcode' + this.type,
    }
  },
  methods: {
     /* 扫码签名 */
    qrcode () {
      console.log('qrcode====')
      let localhostUrl = window.location.href; //获取到测试or正式环境路径等等
      localhostUrl = localhostUrl.split("#");
      localhostUrl = localhostUrl[0];
      console.log("本地url：", localhostUrl)
      const QR = this.qrCode
      //二维码的生成
      // 随机字符串
      const randomNum = (Math.random() + 1).toString(36).substring(7);
      // const randomNum = '1234'
      console.log(randomNum, 'random')
      this.$emit('update', randomNum) 
      let qrcode = new QRCode(QR, {
        width: 140,
        height: 140, // 高度
        // text: `${localhostUrl}#/scenicspot?id=${this.randomNum}`
        text: `${localhostUrl}/#/scenicspot?id=${randomNum}`
      });
    }
  },
   mounted () {
    this.qrcode();
    console.log(this.type, this.qrCode)
  }
}
</script>

<style>

</style>